<template>
    <div class="main_content_wrap" style="background-color:#ffffff;">
        <div class="main_content_title">
            应用管理
        </div>
        <div>
            <div style="margin-bottom:10px;">
                <el-button @click="add()">新增应用</el-button>
            </div>
            <el-table size="small" :data="appList" style="width: 100%">
                <el-table-column prop="id" label="序号" width="60" align="center"></el-table-column>
                <el-table-column prop="appName" label="应用名称" align="center" width="140"></el-table-column>
                <el-table-column prop="appId" label="应用ID" align="center" ></el-table-column>
                <el-table-column prop="appSecret" label="应用密钥" align="center" ></el-table-column>
                <el-table-column prop="appImg" label="应用图标" align="center" width="140"></el-table-column>
                <el-table-column prop="destination" label="操作" align="center" width="130">
                    <template slot-scope="scope">
                        <el-button type="text" @click="updateOpt(scope.row.id)">修改</el-button>
                        <el-button style="color:#C7000B" type="text" @click="deleteOpt(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            title="添加规则"
            :visible.sync="saveVisible"
            :close-on-click-modal="false"
            width="40%">
            <el-form size="small" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="应用名称" prop="appName">
                    <el-input v-model="ruleForm.appName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="saveVisible = false;$refs.ruleForm.resetFields()">取 消</el-button>
                <el-button size="small" type="primary" @click="submitForm()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default{
    data(){
        return{
            appList:[],
            ruleForm:{
                appName:'',
                appImg:''
            },
            saveVisible:false,
            rules: {
                appName: [
                    { required: true, message: '必填项不能为空', trigger: 'blur' }
                ],
                
            }
        }
    },
    mounted(){
        this.loadData()
    },
    methods:{
        loadData(){
            this.$http.get('/api/app/list').then(({
                data: res
            }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                console.log(res.data)
                this.appList = res.data;
            }).catch(() => {})
        },
        add(){
            this.saveVisible = true;
        },
        submitForm(){
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    var url = this.ruleForm.id?'api/app/update':'/api/app/add'
                    this.$http.post(url, this.ruleForm).then(({
                        data: res
                    }) => {
                        if (res.code !== 0) {
                            return this.$message.error(res.msg)
                        }
                        this.loadData()
                        this.saveVisible = false;
                        this.$refs.ruleForm.resetFields();
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                    }).catch(() => {})
                } else {
                    return false;
                }
            });
        },
        updateOpt(id){
            console.log(id)
            this.$http.get('/api/app/getById?id='+id).then(({
                data: res
            }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                console.log(res.data)
                this.ruleForm = res.data;
                this.saveVisible = true;
            }).catch(() => {})
        },
        deleteOpt(id){
            this.$http.get('/api/app/delete?id='+id).then(({
                data: res
            }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                this.loadData()
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
            }).catch(() => {})
        }
    }
}
</script>
<style scoped>

</style>